<template>
  <div>
    <van-cell-group inset>
      <van-field label="当前数字" :model-value="currentNumber" readonly />
    </van-cell-group>

    <div class="buttons">
      <van-button type="primary" block @click="increaseNumber">增加数字</van-button>
      <van-button type="danger" block @click="decreaseNumber">减少数字</van-button>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import useWeb3 from "../util"; // 引入 useWeb3 工具

export default {
  name: "BallotView",
  setup() {
    const { ballotSm, web3 } = useWeb3(); // 获取 Web3 和合约实例
    const currentNumber = ref(0); // 用来存储合约中的数字

    // 获取当前数字
    const getCurrentNumber = async () => {
      try {
        const number = await ballotSm.methods.getNumber().call(); // 调用合约的 getNumber 方法
        currentNumber.value = number; // 设置数字
      } catch (error) {
        console.error("获取当前数字失败:", error);
      }
    };

    // 增加数字
    const increaseNumber = async () => {
      const increment = prompt("请输入要增加的数字:");
      const parsedIncrement = parseInt(increment); // 将输入转换为整数

      // 验证输入是否为有效数字
      if (isNaN(parsedIncrement)) {
        alert("请输入有效的数字");
        return;
      }

      try {
        // 请求 MetaMask 账户
        const accounts = await web3.eth.requestAccounts(); // 获取用户的以太坊账户
        const defaultAccount = accounts[0]; // 获取第一个账户地址

        // 确保传递的数字参数是有效的
        const tx = await ballotSm.methods.addNumber(parsedIncrement).send({
          from: defaultAccount,
          gas: 1000000,
          gasPrice: "10000000000",
        });

        console.log("增加数字交易成功:", tx);
        getCurrentNumber(); // 更新数字
      } catch (error) {
        console.error("增加数字失败:", error);
      }
    };

    // 减少数字
    const decreaseNumber = async () => {
      const decrement = prompt("请输入要减少的数字:");
      const parsedDecrement = parseInt(decrement); // 将输入转换为整数

      // 验证输入是否为有效数字
      if (isNaN(parsedDecrement)) {
        alert("请输入有效的数字");
        return;
      }

      try {
        // 请求 MetaMask 账户
        const accounts = await web3.eth.requestAccounts(); // 获取用户的以太坊账户
        const defaultAccount = accounts[0]; // 获取第一个账户地址

        // 确保传递的数字参数是有效的
        const tx = await ballotSm.methods.minusNumber(parsedDecrement).send({
          from: defaultAccount,
          gas: 1000000,
          gasPrice: "10000000000",
        });

        console.log("减少数字交易成功:", tx);
        getCurrentNumber(); // 更新数字
      } catch (error) {
        console.error("减少数字失败:", error);
      }
    };

    // 组件挂载时获取合约数据
    onMounted(async () => {
      console.log("组件已挂载");
      await getCurrentNumber(); // 获取当前数字
    });

    return {
      currentNumber, // 绑定到模板
      increaseNumber,
      decreaseNumber,
    };
  },
};
</script>

<style scoped>
.content {
  margin-top: 32px;
}

.buttons {
  margin-top: 16px;
}

.result {
  width: 60%;
  margin: 20px auto;
}
</style>
